<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>系统设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.7/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/layui-v2.5.7/css/modules/layer/default/layer.css" media="all">
    <style>
        .layui-form-pane .layui-form-label {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar_image {
            -webkit-text-size-adjust: 100%;
            font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
            font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            text-align: center;
            color: #3d4450;
            max-width: 100%;
            vertical-align: middle;
            border: 0;
            overflow: hidden;
            font-size: 12px;
            border-radius: 50%;
            height: 140px;
            width: 140px;
            display: block;
            transition: transform .3s;
            margin: 2px auto 2px;
        }

        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<div id="main-content">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">接口域名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="webDomain" v-model="blogSetting.webDomain" required
                                           lay-verify="required" value="" placeholder="接口域名" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">博客域名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="blogAddress" v-model="blogSetting.blogAddress" required
                                           lay-verify="required" value="" autocomplete="off" class="layui-input"
                                           placeholder="(必填)博客域名(入口地址)，比如http://spzgczyj.top/blog">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">博主邮箱</label>
                                <div class="layui-input-block">
                                    <input v-model="blogSetting.blogMailAddress" type="text" name="blogMailAddress"
                                           required lay-verify="required" placeholder="请输入博主邮箱，用于接受备份文件的邮箱"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item" pane="" id="mailEnableDiv">
                                <label class="layui-form-label">邮件任务</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" checked="" name="open" lay-skin="switch"
                                           lay-filter="switchMailEnable" lay-text="ON|OFF"
                                           :checked="blogSetting.mailEnable==0">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">上一次修改时间</label>
                                <div class="layui-input-block">
                                    <input v-model="blogSetting.updateTime" type="text"
                                           class="layui-input layui-disabled" disabled>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" style="text-align: center">
                        <button class="layui-btn" v-on:click=updateBlogSetting()>确认保存</button>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-card">

                    <div class="layui-card-body">
                        <button class="layui-btn" v-on:click=backupSql()>备份sql</button>
                        <img id="verifyImg" alt=""/>
                    </div>

                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-card">

                    <div class="layui-card-body">
                        <button class="layui-btn" v-on:click=backupLive2d()>备份live2d</button>
                        <a id="downloadLive2d" v-bind:href="downloadLive2dHref"
                           download="live2dAll.zip">&nbsp;{{downloadLive2dHref}}</a>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

</body>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/layer-v3.5.1/layer/layer.js" charset="utf-8"></script>
<script src="../lib/axios/axios.min.js"></script>
<script src="../lib/vue-module/vue.js"></script>
<script src="../js/main.js"></script>
<script src="../lib/layui-v2.5.7/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    const vueObject = new Vue({
        el: "#main-content",
        data: {
            blogSetting: {
                "blogAddress": "",
                "blogMailAddress": "",
                "createTime": "",
                "id": 1,
                "mailEnable": 0,
                "updateTime": "",
                "webDomain": ""
            },
            downloadLive2dHref: "",
            codeUuid: "",
        },
        watch: {
            /*当live2dInfoList绑定的ui渲染完成时，强制layui表单刷新ui*/
            blogSetting: function () {
                this.$nextTick(function () {
                    layui.use('form', function () {
                        let form = layui.form;
                        form.render();
                    });
                });
            },
        },
        methods: {
            updateBlogSetting() {
                axiosPostFunction("/api/blogSetting/authApi/update", this.blogSetting, true).then((responseData) => {
                    if (responseData) {
                        layer.alert(responseData, {icon: 1, skin: 'layui-layer-molv', closeBtn: 0, anim: 4});
                    }
                }).catch(function (err) {
                    console.warn(err);
                });
            },
            backupSql() {
                let loading = layer.msg('备份sql中...', {icon: 16, shade: 0.3});
                axiosPostFunction("/api/backup/authApi/sql", null, true).then((responseData) => {
                    layer.close(loading);
                    if (responseData) {
                        $('#verifyImg').attr("src", 'data:image/png;base64,' + responseData['base64ImgStr']);
                        this.codeUuid = response['uuid'];
                    }
                }).catch(function (err) {
                    layer.close(loading);
                    console.warn(err);
                });
            },
            backupLive2d() {
                let loading = layer.msg('备份看板娘中...', {icon: 16, shade: 0.3});
                axiosPostFunction("/uploads/live2d/authApi/backupLive2d", null, true).then((responseData) => {
                    if (responseData) {
                        this.downloadLive2dHref = responseData;
                        layer.close(loading);
                    }
                }).catch(function (err) {
                    console.warn(err);
                });
            },
        },
        mounted() {
            let _that = this;
            axiosGetFunction("/api/blogSetting/openApi/getBlogSetting").then(function (response) {
                _that.blogSetting = response;
            }).catch(function (err) {
                console.warn(err)
            });
        },
        created() {

        }
    });
    layui.use(['upload', 'form'], function () {
        let $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        /*监听layui绑定的开关事件，当开关的值改变的时候实时更新vue对象data的值*/
        form.on('switch(switchMailEnable)', function (data) {
            if (this.checked) {
                vueObject.blogSetting.mailEnable = 0;
            } else {
                vueObject.blogSetting.mailEnable = 1;
            }
        });
    });

</script>
</body>
</html>
